<template>
  <div class="userInfo">
    <Header title="个人信息" :showClose="false" />
    <div class="contentItem">
      <div class="noTitle">基本信息</div>
      <div class="info" v-for="b in 3" :key="b">
        <div class="infoItem">
          <span>姓名: </span>
          <span>张三</span>
        </div>
      </div>
      <div class="lookBtn">
        <button @click="lookBtn">查看</button>
      </div>
    </div>
    <div class="contentItem">
      <div class="noTitle">工作情况</div>
      <div class="info" v-for="b in 3" :key="b">
        <div class="infoItem">
          <span>工作单位: </span>
          <span>福建电机工程</span>
        </div>
      </div>

      <div class="lookBtn">
        <button @click="lookWork">查看</button>
      </div>
    </div>
    <div class="changePassword" @click="changePassword">
      <button>密码修改</button>
    </div>
    <div class="goBack" @click="goback">
      <button>返回</button>
    </div>
  </div>
</template>

<script>
import Header from "../components/header";
export default {
  name: "userInfo",
  data() {
    return {};
  },
  components: {
    Header,
  },
  methods: {
    goback() {
        this.$router.push("/membership")
      
    },
    changePassword() {
        this.$router.push("/changePassword")
    },
    lookBtn() {
        this.$router.push("/basicInfo")
    },
    lookWork() {
        this.$router.push("/workInfo")
    }
  },
};
</script>

<style lang="less">
.userInfo {
  .contentItem {
    margin-top: 10px;
    padding: 15px 3px 20px 20px;
    .noTitle {
      width: 120px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #333333;
      border-bottom: 3px solid #333333;
      margin-bottom: 10px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .infoItem {
        height: 30px;
        line-height: 30px;
      }
    }
    .lookBtn {
      display: flex;
      justify-content: flex-end;
      button {
        width: 60px;
        height: 25px;
        background: #169bd5;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
  .changePassword {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    button {
      width: 150px;
      height: 40px;
      background: #169bd5;
      color: #fff;
      border-radius: 4px;
    }
  }
  .goBack {
    display: flex;
    justify-content: center;
    button {
      width: 150px;
      height: 40px;
      background: #ffffff;
      color: #000;
      border: 1px solid #000;
      border-radius: 4px;
    }
  }
}
</style>